<template>
	<button class="btn btn-sm btn-primary" @click="showUpdateDialog">设置付费套餐</button>
  <vue-modal
    title="设置付费套餐"
    ok-text="提交"
    cancel-text="取消"
    :show.sync="showUpdateAdModal"
    effect="fade"
    :small="true"
    :width="500"
    :callback="submit">
    <div slot="modal-body" class="modal-body">
      <h4 class="text-left">组合：{{item.name}}</h4>
      <div class="form-group text-left form-group-sm" v-for="gold in golds">
        <table class="table table-bordered table-condensed">
          <caption>
            <div class="form-inline">
              *档位名称：<input type="text" v-model="gold.title" class="form-control" :disabled=" gold.newType === 2 ">
              <button v-if="gold.newType !== 2" class="btn btn-sm btn-danger" @click="deleteGold(gold)">删除此档位</button>
              <button v-else class="btn btn-sm btn-success" @click="enableGold(gold)">恢复此档位</button>
            </div>
          </caption>
          <thead>
            <tr>
              <th class="col-xs-4">*天数</th>
              <th class="col-xs-4">*原始价</th>
              <th class="col-xs-4">*折扣</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="col-sm-4"><input type="number" class="form-control" v-model="gold.duration" :disabled=" gold.newType === 2 " min="1" @blur="checkDuration(gold.duration)"></td>
              <td class="col-sm-4"><input type="number" class="form-control" v-model="gold.price" :disabled=" gold.newType === 2 " @blur="checkPrice(gold.price)" min="0"></td>
              <td class="col-sm-4"><input type="number" class="form-control" v-model="gold.discount" :disabled=" gold.newType === 2 " placeholder="0 - 100" min="0" max="100" step="10" @blur="checkDiscount(gold.discount)"></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="form-group form-group-sm">
        <div class="text-right">
          <button type="button" class="btn btn-sm btn-primary" @click="addPay">新增套餐</button>
        </div>
      </div>
    </div>
  </vue-modal>
</template>
<style src="./update-pay.css" scoped></style>
<script src="./update-pay.js"></script>
